<template>
   <div class="flex header" >
        <div class="header-title" >
            <slot name="title">
                {{ title ? title : route?.meta?.title }}
            </slot>
        </div>
        <div class="header-content">
            <slot name="content"></slot>
        </div>
   </div> 
</template>
<script lang="ts" setup>
defineProps({
    title:{type:String,default:()=>''}
});
const route = useRoute()
</script>
<style lang="scss" scoped>
.header {
    width: 100%;
    border-bottom: 1px solid #f2f3f5;
    &-title {
        height: 50px;
        font-size: 18px;
        font-weight: bold;
        padding: 10px;
        display: flex;
        align-items: center;
    }
    &-content {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: flex-end;
    }
}

</style>
